import {
  EzCascaderConfiguration,
  EzCascaderOption,
  EzCheckboxConfiguration,
  EzDatepickerConfiguration,
  EzFormConfiguration,
  EzFormValidators,
  EzInputConfiguration,
  EzNumberConfiguration,
  EzRadioConfiguration,
  EzSelectConfiguration,
  EzSwitchConfiguration,
  EzTextareaConfiguration,
  EzTimepickerConfiguration,
  EzTreeSelectConfiguration,
  EzTreeSelectOptions,
} from 'ng-easy-form-lib';
import { timer } from 'rxjs';
import { map, take } from 'rxjs/operators';

const cities: { [key: string]: EzCascaderOption[] } = {
  zhejiang: [
    {
      value: 'hangzhou',
      label: '杭州市',
      isLeaf: true,
    },
    {
      value: 'ningbo',
      label: '宁波市',
      isLeaf: true,
    },
  ],
  jiangsu: [
    {
      value: 'nanjing',
      label: '南京市',
      children: [
        {
          value: 'pukouqu',
          label: '浦口区',
          isLeaf: true,
        },
        {
          value: 'xuanwuqu',
          label: '玄武区',
          isLeaf: true,
        },
      ],
    },
  ],
};

const name: EzInputConfiguration = {
  type: 'input',
  label: '姓名',
  name: 'name',
  placeholder: '请输入姓名',
  required: true,
  maxlength: 20,
  search: true,
  disabled: true,
  onSearch: (control, group, form) =>
    form
      .getGroup('basicInfo')
      .get('age')
      .setValue(50),
  validators: [EzFormValidators.required, EzFormValidators.minlength(6)],
};

const email: EzInputConfiguration = {
  type: 'input',
  label: '邮箱',
  name: 'email',
  placeholder: '请输入邮箱',
  required: true,
  validators: [EzFormValidators.required, EzFormValidators.email()],
};

const phoneNumber: EzInputConfiguration = {
  type: 'input',
  label: '手机号',
  name: 'phoneNumber',
  placeholder: '请输入手机号',
  required: true,
  validators: [EzFormValidators.required, EzFormValidators.phoneNumber()],
};

const idCard: EzInputConfiguration = {
  type: 'input',
  label: '身份证号码',
  name: 'idCard',
  placeholder: '请输入身份证号码',
  required: true,
  validators: [EzFormValidators.required, EzFormValidators.idCard()],
};

const age: EzNumberConfiguration = {
  type: 'number',
  label: '年龄',
  name: 'age',
  min: 18,
  max: 100,
  precision: 2,
  step: 1,
  formatter: value => (value ? `${value}岁` : ''),
  disabled: true,
  placeholder: '请输入年龄',
  required: true,
  validators: [EzFormValidators.required],
  onBlur: () => console.log(`blur`),
  onFocus: () => console.log(`focus`),
};

const sex: EzSelectConfiguration = {
  type: 'select',
  name: 'sex',
  multiple: true,
  value: [2],
  label: '性别',
  placeholder: '请选择性别',
  clearable: true,
  required: true,
  maxSelectCount: 2,
  options: () =>
    timer(2000)
      .pipe(take(1))
      .pipe(
        map(() => [
          {
            value: 1,
            label: '男',
          },
          {
            value: 2,
            label: '女',
          },
          {
            value: 3,
            label: '未知',
            disabled: true,
          },
        ])
      ),
  validators: [EzFormValidators.required],
};

const password: EzInputConfiguration = {
  type: 'input',
  label: '密码',
  name: 'password',
  placeholder: '请输入密码',
  required: true,
  validators: [EzFormValidators.required],
  onChange: (control, group, form) => {
    const confirmPwd = form.getControl('confirmPassword');
    if (control.getValue()) {
      confirmPwd.markAsRequired();
    } else {
      confirmPwd.markAsNotRequired();
    }
    form.getControl('confirmPassword').setValue(null);
  },
};

const confirmPassword: EzInputConfiguration = {
  type: 'input',
  label: '确认密码',
  name: 'confirmPassword',
  placeholder: '请确认密码',
  validators: [
    (control, group, form) => {
      const passwd = form.getControl('password');
      if (!passwd.getValue() || passwd.getValue() === control.getValue()) {
        return null;
      }
      if (!control.getValue()) {
        return { required: true };
      } else if (control.getValue() !== passwd.getValue()) {
        return { invalid: '两次密码不一致' };
      }
      return null;
    },
  ],
};

const nationality: EzCheckboxConfiguration = {
  type: 'checkbox',
  label: '国籍',
  name: 'nationality',
  required: true,
  disabled: false,
  value: ['2', '3'],
  validators: [EzFormValidators.required],
  options: [
    {
      value: '1',
      label: '中国',
    },
    {
      value: '2',
      label: '美国',
    },
    {
      value: '3',
      label: '日本',
      disabled: true,
    },
  ],
};

const education: EzRadioConfiguration = {
  type: 'radio',
  name: 'edu',
  label: '学历',
  value: '2',
  required: true,
  validators: [EzFormValidators.required],
  options: [
    { value: '1', label: '大专' },
    { value: '2', label: '本科' },
    { value: '3', label: '研究生' },
  ],
};

const birthday: EzDatepickerConfiguration = {
  type: 'datepicker',
  name: 'birthday',
  label: '出生日期',
  placeholder: '请选择出生日期',
  validators: [EzFormValidators.required],
  required: true,
  format: 'yyyy/MM/dd',
  disabledDate: date => {
    return date > new Date();
  },
};

const workOffTime: EzTimepickerConfiguration = {
  type: 'timepicker',
  name: 'workOffTime',
  label: '下班时间',
  placeholder: '请选择下班时间',
  disabled: false,
  required: true,
  validators: [EzFormValidators.required],
  use12Hours: true,
  disabledHours: () => [1, 3, 5, 7, 9],
  disabledMinutes: () => [2, 4, 6],
  disabledSeconds: () => [30],
};

const city: EzCascaderConfiguration = {
  type: 'cascader',
  label: '城市',
  name: 'city',
  required: true,
  placeholder: '请选择城市',
  validators: [EzFormValidators.required],
  disabled: false,
  value: ['jiangsu', 'nanjing', 'xuanwuqu'],
  options: (node, index) => {
    return timer(2000)
      .pipe(take(1))
      .pipe(
        map(() => {
          return index < 0
            ? [
                {
                  value: 'zhejiang',
                  label: '浙江省',
                },
                {
                  value: 'jiangsu',
                  label: '江苏省',
                },
              ]
            : cities[node.value];
        })
      )
      .toPromise();
  },
};

const address: EzTextareaConfiguration = {
  type: 'textarea',
  name: 'address',
  label: '详细地址',
  required: true,
  maxlength: 100,
  validators: [EzFormValidators.required],
  disabled: false,
  readonly: false,
  autoSize: { maxRows: 6, minRows: 3 },
  itemLabelSpan: 2,
  span: 24,
};

const enabled: EzSwitchConfiguration = {
  type: 'switch',
  checkedText: '启用',
  uncheckedText: '禁用',
  value: true,
  name: 'enabled',
  label: '是否启用',
  required: true,
  disabled: false,
  validators: [EzFormValidators.required],
  onChange: (control, group, form) => {
    if (control.getValue()) {
      form.enableGroups('contactInfo');
    } else {
      form.disableGroups('contactInfo');
    }
  },
};

const liveCity: EzTreeSelectConfiguration = {
  type: 'tree-select',
  label: '居住地址',
  name: 'liveCity',
  required: true,
  disabled: false,
  placeholder: '请选择居住地址',
  validators: [EzFormValidators.required],
  multiple: true,
  maxTagCount: 2,
  value: ['zhejiangsheng', 'yangzhou'],
  options: [
    {
      label: '江苏省',
      value: 'jiangsu',
      children: [
        {
          label: '南京市',
          value: 'nanjing',
          children: [
            {
              label: '浦口区',
              value: 'pukouqu',
              isLeaf: true,
            },
            {
              label: '江宁',
              value: 'jianging',
              isLeaf: true,
            },
          ],
        },
        {
          label: '扬州市',
          value: 'yangzhou',
          children: [
            {
              label: '邗江区',
              value: 'hanjiang',
              isLeaf: true,
            },
            {
              label: '江陵',
              value: 'jianling',
              isLeaf: true,
            },
          ],
        },
      ],
    },
    {
      label: '浙江省',
      value: 'zhejiangsheng',
      children: [{ label: '杭州市', value: 'zhangzhoushi', isLeaf: true }],
    },
  ],

  // options: (parent: EzTreeSelectOptions) => {
  //   let results = [];
  //   if (!parent) {
  //     results = [
  //       {
  //         label: '江苏省',
  //         value: 'jiangsusheng',
  //       },
  //       {
  //         label: '浙江省',
  //         value: 'zhejiangsheng',
  //       },
  //     ];
  //   } else if (parent.value === 'jiangsusheng') {
  //     results = [
  //       {
  //         label: '南京市',
  //         value: 'nanjing',
  //         isLeaf: true,
  //       },
  //       {
  //         label: '扬州市',
  //         value: 'yangzhou',
  //         isLeaf: true,
  //       },
  //     ];
  //   } else if (parent.value === 'zhejiangsheng') {
  //     results = [
  //       {
  //         label: '杭州市',
  //         value: 'hangzhoushi',
  //         isLeaf: true,
  //       },
  //     ];
  //   }
  //   return timer(2000)
  //     .pipe(take(1))
  //     .pipe(map(() => results));
  // },
};

export const TestFormConfiguration: EzFormConfiguration = {
  layout: 'horizontal',
  cols: 3,
  itemLabelSpan: 6,
  tabPosition: 'top',
  groupStyle: 'default',
  buttonsFull: true,
  groups: [
    {
      title: '基础信息',
      name: 'basicInfo',
      controls: [name, idCard, education, age, sex, birthday, nationality, workOffTime, enabled],
    },
    {
      title: '联系信息',
      name: 'contactInfo',
      controls: [email, phoneNumber, city, address, liveCity],
    },
    {
      title: '设置密码',
      name: 'passwordInfo',
      controls: [password, confirmPassword],
    },
  ],
  onInit: form => {
    form.getControl('age').enable();
  },
  onSubmit: form => {
    return timer(2000).pipe(take(1));
  },
};
